<!--  -->
<template>
    <view class="mt-4">
        <view class="flex justify-between">
            <view class="text-lg">推荐房源</view>
            <view class="text-gray-400"
                >更多<uni-icons type="right" color="#a3af9c"></uni-icons
            ></view>
        </view>
        <view class="bg-white my-2 rounded-lg">
            <z-paging
                ref="paging"
                v-model="list"
                @query="queryList"
                :fixed="false"
                :paging-style="{
                    height: '48vh',
                }"
            >
                <view
                    v-for="(item, index) in list"
                    :key="index"
                    class="flex p-3 space-x-2"
                >
                    <view>
                        <image
                            class="rounded-lg w-32 h-24"
                            mode="aspectFill"
                            src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg"
                        ></image>
                    </view>
                    <view
                        class="flex flex-col border-b"
                        style="width: calc(100% - 8rem - 16rpx)"
                    >
                        <view class="text-base font-semibold">{{
                            item.title
                        }}</view>
                        <view class="mb-3">
                            <view>{{ item.desc }}</view>
                        </view>
                        <view class="flex items-end">
                            <view class="text-lg text-red-600 mr-5">{{
                                item.cost
                            }}</view>
                            <view class="text-gray-400">{{
                                item.average
                            }}</view>
                        </view>
                    </view>
                </view>
            </z-paging>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
type listType = {
    title: string;
    desc: string;
    cost: string;
    average: string;
};
const list = ref<listType[]>([]);

const paging = ref();

const loadPage = (page: number) => {
    return new Promise((resolve) => {
        resolve([
            {
                title: "奥林清华1幢103" + page,
                desc: "4室2厅  |  170㎡",
                cost: "340万",
                average: "20000元/平",
            },
            {
                title: "奥林清华1幢103" + page + 1,
                desc: "4室2厅  |  170㎡",
                cost: "340万",
                average: "20000元/平",
            },
            {
                title: "奥林清华1幢103" + page,
                desc: "4室2厅  |  170㎡",
                cost: "340万",
                average: "20000元/平",
            },
            {
                title: "奥林清华1幢103" + page + 1,
                desc: "4室2厅  |  170㎡",
                cost: "340万",
                average: "20000元/平",
            },
            {
                title: "奥林清华1幢103" + page,
                desc: "4室2厅  |  170㎡",
                cost: "340万",
                average: "20000元/平",
            },
            {
                title: "奥林清华1幢103" + page + 1,
                desc: "4室2厅  |  170㎡",
                cost: "340万",
                average: "20000元/平",
            },
            {
                title: "奥林清华1幢103" + page,
                desc: "4室2厅  |  170㎡",
                cost: "340万",
                average: "20000元/平",
            },
            {
                title: "奥林清华1幢103" + page + 1,
                desc: "4室2厅  |  170㎡",
                cost: "340万",
                average: "20000元/平",
            },
            {
                title: "奥林清华1幢103" + page,
                desc: "4室2厅  |  170㎡",
                cost: "340万",
                average: "20000元/平",
            },
            {
                title: "奥林清华1幢103" + page + 1,
                desc: "4室2厅  |  170㎡",
                cost: "340万",
                average: "20000元/平",
            },
        ]);
    });
};
const queryList = (pageNo: number, pageSize: number) => {
    console.log("加载");
    if (list.value.length > 20) {
        paging.value.complete([]);
        return;
    }
    loadPage(pageNo)
        .then((res) => {
            paging.value.complete(res);
        })
        .catch((_) => {
            paging.value.complete(false);
        });
};
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
</style>
